<template>
	<view>
		<view class="headInfo" v-if="merchantInformation&&merchantInformation.merchantSurfaceDrawing">

			<image class="imgLogo" :src="merchantInformation.merchantSurfaceDrawing " mode=""></image>
			<view class="positionInfo ">
				<view class="flex-bottom ">
					<image class="avater" :src="merchantInformation.merchantLogo" mode=""></image>

					<view class="desdescribe">
						<view style="color: #fff;font-size: 40rpx;margin-bottom: 10px;">
							{{merchantInformation.merchantName}}
						</view>
						<text @click="followMe()" style="color: #F2F2F2;">关注商家抖音号，获取更多惊喜></text>

					</view>
				</view>
			</view>
		</view>

		<!-- 底部框 -->

		<view class="footerContaniner" v-if="merchantInformation&&merchantInformation.businessHoursEnd">
			<!-- 服务热线 -->
			<view class="flex-between borderBottom">
				<view>
					<view style="margin-bottom: 20rpx; color: black;font-weight: 700;">
						服务热线：{{merchantInformation.merchantPhone?merchantInformation.merchantPhone:''}}
					</view>
					<view style="color: #999;">
						营业时间:{{merchantInformation.businessHoursStart}}-{{merchantInformation.businessHoursEnd}}
					</view>
				</view>
				<view class="flex-column">
					<image @click="callPhone(merchantInformation.merchantPhone?merchantInformation.merchantPhone:'')"
						class="iphoneImg" src="../../static/Group 3392.png" mode=""></image>
					<view style="margin-top: 10rpx;">
						电话
					</view>
				</view>
			</view>
			<view class="flex-between borderBottom">
				<view>
					<view style="margin-bottom: 20rpx; color: black;font-weight: 700;">
						{{merchantInformation.merchantAddress}}
					</view>
					<view style="color: #999;">
						联系人:{{merchantInformation.contactPerson}}
					</view>
				</view>
				<view class="flex-column">
					<image @click='addressFn(merchantInformation)' class="iphoneImg" src="../../static/Group 3393.png"
						mode=""></image>
					<view style="margin-top: 10rpx;">
						导航
					</view>
				</view>
			</view>
			<div class="positionMoney" v-if="redemptionSettings">
				<image @click="sendVideo" style="margin-top: 30rpx; width: 100%;" src="../../static/22 52.png"
					mode="widthFix"></image>
				<text
					class="money sunui-text-ellipsis">￥{{redemptionSettings.returnCashType==1?redemptionSettings.returnCashAmount.toFixed(2):(payAmount*((Math.ceil(Number(redemptionSettings.returnCashRatio)))/100)).toFixed(2)}}</text>
			</div>

			<view style="padding-bottom: 40rpx; border-bottom: 2rpx solid #F2F2F2;"
				v-if="redemptionSettings&&redemptionSettings.returnCashTime">
				<view style="font-size: 40rpx;font-weight: 700; margin: 20rpx 0;">
					活动规则
				</view>
				1.点击上方 '立即转发视频'按钮</br>
				2.将商家的视频作品转发到你的抖音账号上</br>
				3.转发成功后<text
					style="color: red;margin: 0 5rpx;font-weight: 700;">{{redemptionSettings.returnCashTime?redemptionSettings.returnCashTime:''}}</text>小时不删除即可完成任务
				</br>
				4.完成任务即可获得<text
					style="color: red;margin: 0 5rpx;font-weight: 700;">{{redemptionSettings.returnCashType==1?redemptionSettings.returnCashAmount:(payAmount*((Math.ceil(Number(redemptionSettings.returnCashRatio)))/100)).toFixed(2)}}</text>元现金返现原路返回

			</view>
			<view class="swiperList" v-if="isShare">
				<image class="noticeImg" src="../../static/Frame (2).png" mode=""></image>
				<swiper class="swiper" :autoplay='autoplayBoolen' vertical=true circular :indicator-dots="indicatorDots"
					:duration="duration">
					<block v-for="(item,i) in shareList" :key="i">
						<swiper-item>
							<view class="swiper-item uni-bg-red"><text
									style="color: #1E6CEB;margin-right: 15rpx;">{{item.userName }} </text> 发布了视频领取了奖励
							</view>
						</swiper-item>
					</block>

				</swiper>
				
			</view>
          <view v-for="(img,index) in merchantDetailChartList" :key="index">
          	<image class="detailImg" :src="img"></image>
          
          </view>

		</view>







	</view>
</template>

<script>
	// import moment from 'moment';
	export default {
		data() {
			return {
				title: 'Hello',
				indexMainData: {
					loginBackgroundImg: 0
				},
				backgrounds: require('../../static/Group 3148.png'),
				tiem: {
					latitude: '',
					longitude: ''
				},
				activityListId: '',
				activityId: '',
				dyShares: '',
				// 商家id
				merchantId: '',
				merchantInformation: null,
				// 返现设置
				redemptionSettings: null,
				duration: 1000,
				indicatorDots: false,
				autoplayBoolen: true,
				shareList: [],
				// 是否有通知
				isShare: false,
				payAmount: '',
				openId: '',
				schema: '',
				merchantDetailChartList: [],
				noFollowMe: true


			}
		},
		onLoad(options) {
			// 拨打技师电话
			if (options.merchantId) {
				this.merchantId = options.merchantId ? options.merchantId : uni.getStorageSync('merchantId')

			}
			if (options.activityId) {

				this.activityId = options.activityId; //活动id
			}
			if (options.activityListId) {
				this.activityListId = options.activityListId; //活动列表id
				// uni.showModal({
				// 	content: options.activityListId,
				// 	showCancel: false,
				// 	confirmText: '确定',
				// 	success() {
				// 		window.close();
				// 	}
				// })
				this.init()
				this.shareListFn(),
					this.selectMerchantFollowMe()


			}


		},
		onShow() {
			this.init()
			this.getMerchantinfo()
			// 关注我

		},
		computed: {
			// 是否开启响应式布局
			styleResponsive() {
				return this.$store.state.theme.styleResponsive;
			},
			// 时间格式化
			formattedDate() {
				return (params) => {
					const currentDate = moment(params);
					const formattedDate = currentDate.format('HH:mm');
					return formattedDate;
				};
			}
		},
		methods: {
			async selectMerchantFollowMe() {
				const result = await this.$http.get({
					url: this.$api.selectMerchantFollowMe,
					data: {
						merchantId: this.merchantId,
					}
				});
				if (result.code == 2000) {

					if (result.data) {
						this.openId = result.data.openId
					} else {
						this.noFollowMe = false
					}
					// this.userName=result.data
				} else {
					this.$sun.toast(result.msg, 'none');
				}

				// 跳转到我的页面
				// myAwardGo() {
				// 	uni.navigateTo({
				// 		url: '/pages/index/myPrize?id='+this.id+'&uid='+this.uid+'&releaseChannel='+this.releaseChannel
				// 	})
				// },
			},
			async followMe() {
				if (this.noFollowMe) {
					const result = await this.$http.get({
						url: this.$api.getUserProfile,
						data: {
							openId: this.openId,
							// username:
							merchantId: this.merchantId
						}
					});
					console.log(result)
					if (result.code == 2000) {
						uni.showModal({
							content: result.data.data.schema,
							showCancel: false,
							confirmText: '确定',
							success() {

							}
						})
						// console.log(result.data.data.schema)
						// window.location.href = result.data.data.schema;
						// this.schema=result.data.data.schema
						// this.url = decodeURIComponent(result.data.data.schema)
						// console.log(this.url)
						// window.open(this.url)
						// window.location.href=this.url
						// window.open(this.schema)
					}
				} else {
					this.$sun.toast('请开启关注授权')
				}




			},
			callPhone(phone) {
				this.$sun.phone(phone)
			},
			async shareListFn() {
				console.log('1111')
				const reuslt = await this.$http.post({
					url: this.$api.shareList,
					data: {
						merchantId: this.merchantId,
						page: 1,
						limit: 10
					}
				})
				if (reuslt.code == 2000) {
					console.log(reuslt)
					if (reuslt.data.length) {
						this.shareList = reuslt.data
						this.isShare = true
					} else {
						this.shareList = reuslt.data
						this.isShare = false
					}
				}
			},
			// 转发视频
			async init() {
				const reuslt = await this.$http.get({
					url: this.$api.douPayGetShare,
					data: {
						activityListId: this.activityListId
					}
				})
				if (reuslt.code == 2000) {
					this.dyShares = reuslt.data
				}
				// 获取金额
				const res = await this.$http.post({
					url: this.$api.getActivity,
					data: {
						id: this.activityListId
					}
				})
				if (res.code == 2000) {
					console.log(res)
					this.payAmount = res.data.payAmount

				}



				// 获取返现设置
				const ress = await this.$http.post({
					url: this.$api.getActivityconfigList,
					data: {
						page: 1,
						merchantId: this.merchantId,
						limit: 10
					}
				})
				console.log(ress)
				if (ress.code === 2000) {
					this.redemptionSettings = ress.data.list[0]
				}
			},
			// 商家信息查询
			async getMerchantinfo() {

				const reuslt = await this.$http.post({
					url: this.$api.getMerchantinfo,
					data: {
						id: this.merchantId
					}
				})

				if (reuslt.code == 2000) {
					console.log(reuslt.data)
					if (reuslt.data.merchantDetailChart) {
						if (reuslt.data.merchantDetailChart.includes(',')) {
							console.log('字符串中包含逗号');
							// 包含的进行slice(',') 分割
							this.merchantDetailChartList = reuslt.data.merchantDetailChart.split(',').map((item) =>
								item.trim());
						} else {
							console.log('字符串中不包含逗号');
							this.merchantDetailChartList = reuslt.data.merchantDetailChart.split();
						}
					}
					this.merchantInformation = reuslt.data

					console.log(this.merchantDetailChartList)

					console.log(this.merchantInformation)

				}

			},

			sendVideo() {
				console.log('11111')
				this.jump();
			},

			jump() {
				// 抖音视频Video
				console.log('111')
				this.$at.uniDoFunc({
					// 键名
					key: 'getShare',
					// 是否立即触发,默认触发
					// instant: true,
					success: async () => {
						//锁定
						//锁定
						this.$at.lockKey('getShare');

						// 执行分享的操作
						let videoPath = '';

						console.log(this.dyShares)

						// videoPath = dySharesVideo.video_url;


						/*
						 * video_path:视频url
						 * image_path:图片url
						 * share_to_publish ? 0 默认(跳转视频编辑页) : 1（跳转视频发行页）
						 * hashTags 转发视频 话题
						 * s_type 挂载类型 1 抖音POI（地址） 2小程序 3 没有
						 *  app_id 小程序id
						 *  app_title 小程序标题
						 *  app_url 小程序地址
						 *  poi_id POI地址    
						 *  video_topic ["话题1", "#话题2", "#话题3"]
						 */

						const hashTags = this.dyShares.hashtag_list;
						const url = new URL('snssdk1128://openplatform/share');
						var query = url.searchParams;
						// console.log(hashTags)
						// let hashTagsArr
						// if (hashTags.length) {
						// 	hashTagsArr = hashTags.map(function(topic) {
						// 		return topic.replace("#", "");
						// 	});
						// }
						// query.append('hashtag_list', JSON.stringify(hashTagsArr));


						query.append('client_key', this.dyShares.client_key);
						query.append('state', this.dyShares.state);
						query.append('nonce_str', this.dyShares.nonce_str);
						query.append('timestamp', this.dyShares.timestamp);
						query.append('signature', this.dyShares.signature);
						query.append('share_type', this.dyShares.share_type);
						query.append('video_path', this.dyShares.video_path);
						query.append('title', this.dyShares.tilte);
						if (this.dyShares.poi_id) {
							query.append('poi_id', this.dyShares.poi_id);
						}
						// query.append("image_path", "https://sf3-cdn-tos.douyinstatic.com/obj/douyin-open-static/tiktok.open/home/d_logo.png")
						query.append('share_to_publish', this.dyShares.share_to_publish);
						// 没有视频跳转到发行页
						// if (!videoPath) {
						// 	query.append('video_path', this.activityDetailObj.video_url);
						// 	query.append('share_to_publish', dyShares.share_to_publish);
						// } else {
						// 	query.append('video_path', videoPath);
						// 	query.append('share_to_publish', 1);
						// }
						// if (dySharesVideo.app_id) {
						// 	query.append(
						// 		'micro_app_info',
						// 		JSON.stringify({
						// 			appId: dySharesVideo.app_id,
						// 			appTitle: dySharesVideo.app_title,
						// 			appUrl: dySharesVideo.app_url,
						// 			description: dySharesVideo.app_desc
						// 		})
						// 	);
						// }
						window.location.href = url;
						setTimeout(() => {
							this.$at.releaseKey('getShare');
						}, 700);

					}
				});
				// 转发完以后 设置为''
				// uni.setStorageSync('jgGreceiveId', result.data)
			},


			async addressFn(tiem) {
				

				//纬度
				var latitude = parseFloat(tiem.latitude);
				//经度
				var longitude = parseFloat(tiem.longitude);
				// 百度地图经纬度转腾讯地图经纬度
				var x_pi = 3.14159265358979324;
				var x = parseFloat(tiem.latitude) - 0.0065;
				var y = parseFloat(tiem.longitude) - 0.006;
				var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
				var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
				var lat = (z * Math.cos(theta)).toFixed(7);
				var lng = (z * Math.sin(theta)).toFixed(7);
				//定位地方名称
				var name = tiem.merchantAddress;
				const map = await this.$sun.openLocation({
					//拿到上面的计算好的（百度经纬度转腾讯经纬度）经纬度 进行一个赋值
					lat: tiem.latitude,
					lng: tiem.longitude,
					name:tiem.merchantAddress, //名称
					address: tiem.merchantAddress, //地址
					key: 'SFABZ-WANWW-FISRY-3IGTF-HV7RE-YSFTI' //腾讯key
				});
			},
		}
	}
</script>

<style lang="less">
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.detailImg {
		// object-fit: cover
		vertical-align: bottom;
	}

	.swiperList {
		position: relative;

		.swiper {
			border-radius: 30rpx;
			margin: 40rpx 0;
			width: 682rpx;
			height: 76rpx;
			background-color: #F2F2F2;

		}

		.noticeImg {
			position: absolute;
			left: 10px;
			top: 7px;
			height: 24px;
			width: 24px;
		}
	}

	.swiper-item {
		display: block;
		width: 682rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.flex-bottom {
		display: flex;
		align-items: flex-end;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	page {
		background-color: #fff;
	}

	.footerContaniner {
		position: relative;
		z-index: 999;
		background-color: #fff;
		height: 124px;
		transform: translateY(-30px);
		border-radius: 20px;
		padding: 10px;

		.borderBottom {
			padding: 20rpx 0;
			border-bottom: 2px solid #F2F2F2;
		}

		.iphoneImg {
			width: 82rpx;
			height: 82rpx;
		}

	}

	.positionMoney {
		position: relative;

		.money {
			position: absolute;
			width: 130rpx;
			top: 115rpx;
			left: 50rpx;
			font-size: 40rpx;
			font-weight: 700;
			color: yellow;
			z-index: 999;
		}
	}

	.headInfo {
		position: relative;

		.imgLogo {
			width: 100%;

		}

		.positionInfo {
			position: absolute;
			top: 200rpx;
			left: 30rpx;
			z-index: 9999999999999;

			.avater {
				width: 180rpx;
				height: 180rpx;
			}

			.desdescribe {
				margin-left: 20rpx;
				color: red;

				font-size: 28rpx;

			}
		}

	}

	.login-technician {
		min-height: 100vh;

		box-sizing: border-box;
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		//   background-image: url('/src/assets/images/anmoBackground_01.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		//   background-size: contain;
		position: relative;

	}

	/*每个页面公共css */
</style>